import './SetFront.scss'

import {
    SaveOutlined,
    HddOutlined,
    CommentOutlined,
    AppstoreOutlined,
    VerticalRightOutlined,
    BgColorsOutlined,
    SignatureOutlined,
} from '@ant-design/icons'

import { useState, useRef, useEffect } from 'react'
import { useRequest } from 'alova'
import { useEventEmitter, useMount, useSize } from 'ahooks'
import { Tooltip, TreeSelect, Button } from "antd"

import { Http } from '../../Api'
import { Decrypt } from '../../Utils/IndexedDB'
import { ModelBox, DrawerBox } from '../../Model'
import { FrontEditPage } from '../../Utils/FrontEditPage'

const TopNavList = [
    { uuid: 2, title: '主题设置', icon: <SignatureOutlined /> },
    // { uuid: 3, title: '导航设置', icon: <BarsOutlined /> },
    { uuid: 1, title: '样式设置', icon: <BgColorsOutlined /> },
]

const LeftNavList = [
    { uuid: 'EditWindowData', title: '数据', icon: <HddOutlined /> },
    { uuid: 'EditWindowLayer', title: '图层', icon: <CommentOutlined /> },
    { uuid: 'EditWindowTemplate', title: '组件', icon: <AppstoreOutlined /> },
    // { uuid: 2, title: '筛选', icon: <FilterOutlined /> },
]

// !!! 创建和删除路由时对应生成数据
const LData = {
    'e5400b85-2301-4003-83b0-3a07cdd738a9': {
        data: {},
        layer: [],
        templage: {}
    }
}

// !!! 组件内部组装

// !!! 组件内数据绑定 && 点击事件


const SetFront = () => {
    const renderBox = useRef()
    const size = useSize(renderBox)
    // const [MOptions, setMOptions] = useState({ type: 'FrontLayer', title: '自定义图层' })
    const [MOptions, setMOptions] = useState()
    const [DOptions, setDOptions] = useState()
    const [treeData, setTreeData] = useState([])
    const [RouterActive, setRouterActive] = useState()
    const [StyleData, setStyleData] = useState({})
    const [LeftWindowActive, setLeftWindowActive] = useState()
    const [RouterData, setRouterData] = useState()
    const RenderEvent = useEventEmitter()

    const onRouter = () => { setDOptions({ type: 'FrontRouter', title: '大屏路由设置', data: treeData, width: 600 }) }
    const onSave = () => { console.log('保存数据') }
    const onTopClick = (e) => {
        if (e === 1) setDOptions({ type: 'FrontStyle', title: '大屏样式设置 ', data: StyleData, width: 900 })
        if (e === 2) setMOptions({ type: 'FrontTheme', title: '大屏主题设置 ', data: StyleData, width: 900 })
        if (e === 3) setMOptions({ type: 'FrontNav', title: '大屏导航设置 ', data: StyleData, width: 900 })
    }
    const onLeftClick = (e) => {
        if (RouterData) {
            RenderEvent.emit({ type: 'openBox', data: e })
            setLeftWindowActive(e)
        }
    }

    const { send: getRouter } = useRequest(() => Http({ url: 'getRouter' }), { immediate: false })
    const { send: getStyle } = useRequest(() => Http({ url: 'getStyle' }), { immediate: false })

    const CallBackEvent = useEventEmitter()
    CallBackEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'getRouter') getRouterFunc()
        if (type === 'getStyle') getStyleFunc()
        if (type === 'selLayer') selLayerFunc(data)
        // 判断图层渲染 -> 局部更新设置

    })



    const getRouterFunc = () => {
        getRouter().then(async res => {
            const data = await Decrypt(res.data)
            setTreeData(data)
            if (!RouterActive) {
                const [{ key }] = data
                setRouterActive(key)
            }
        })
    }
    const getStyleFunc = () => {
        getStyle().then(async res => {
            const data = await Decrypt(res.data)
            setStyleData(data)
        })
    }

    const selLayerFunc = (data) => {
        setRouterData({ ...RouterData, layer: data })
    }


    useMount(() => {
        getRouterFunc()
        getStyleFunc()
    })


    useEffect(() => {
        if (RouterActive) {
            if (LData[RouterActive]) setRouterData(LData[RouterActive])
            else setRouterData()
        }
    }, [RouterActive])

    return (
        <div className="SetFront">
            <div className="FrontTop">
                <Tooltip placement="left" title='保存布局' ><SaveOutlined onClick={onSave} /></Tooltip>
                <div className='TopNav'>
                    <div className='SetRouter'>
                        <TreeSelect
                            className='RouterSelect'
                            value={RouterActive}
                            placeholder="请先选择路由"
                            treeDefaultExpandAll
                            treeData={treeData}
                            onChange={setRouterActive}
                            fieldNames={{ value: 'key' }}
                        />
                        <Button type='primary' ghost onClick={onRouter}>编辑路由</Button>
                    </div>
                    <div className='size'>当前屏幕比例 {size?.width} * {size?.height}</div>
                    <div className='SetOptions'>
                        {TopNavList.map(({ uuid, title, icon }) =>
                            <Tooltip key={uuid} placement="top" title={title} onClick={() => onTopClick(uuid)}>{icon}</Tooltip>
                        )}
                    </div>
                </div>
            </div>
            <div className="FrontBtm">
                <div className="FrontLeft">
                    <div>
                        {LeftNavList.map(({ uuid, title, icon }) =>
                            <Tooltip key={uuid} placement="left" title={title} onClick={() => onLeftClick(uuid)}>
                                <div className={`${LeftWindowActive === uuid && 'active'} `}>{icon}</div>
                            </Tooltip>
                        )}
                    </div>
                    <div>
                        {LeftWindowActive &&
                            <VerticalRightOutlined
                                onClick={() => {
                                    RenderEvent.emit({ type: 'closeBox' })
                                    setLeftWindowActive()
                                }}
                            />
                        }
                    </div>
                </div>
                <div className="FrontRight" ref={renderBox}>
                    <FrontEditPage uuid={RouterActive} style={StyleData} RenderEvent={RenderEvent} />
                </div>
            </div>
            <ModelBox OptionsCall={MOptions} ModalEvent={CallBackEvent} />
            <DrawerBox OptionsCall={DOptions} ModalEvent={CallBackEvent} />
        </div>
    );
};

export default SetFront;

